<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="http://xxx.com/register" id="registerForm" method="post">
      请输入用户名：<input type="text" name="userName" /> 请输入密码：<input
        type="text"
        name="password"
      />
      请输入手机号码：<input type="text" name="phoneNumber" />
      <button>提交</button>
    </form>
    <script>

      /***********************策略对象**************************/

      var strategies = {
          isNonEmpty: function( value, errorMsg ){
              if ( value === '' ){
                  return errorMsg;
              }
          },
          minLength: function( value, length, errorMsg ){
              if ( value.length < length ){
                  return errorMsg;
              }
          },
          isMobile: function( value, errorMsg ){
              if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
                  return errorMsg;
              }
          }
      };

      /***********************Validator类**************************/

      var Validator = function(){
          this.cache = [];
      };

      Validator.prototype.add = function( dom, rules ){

          var self = this;

          for ( var i = 0, rule; rule = rules[ i++ ]; ){
              (function( rule ){
                  var strategyAry = rule.strategy.split( ':' );
                  var errorMsg = rule.errorMsg;

                  self.cache.push(function(){
                    var strategy = strategyAry.shift();
                        strategyAry.unshift( dom.value );
                        strategyAry.push( errorMsg );
                        return strategies[ strategy ].apply( dom, strategyAry );
                    });
                  })( rule )
              }

          };

          Validator.prototype.start = function(){
              for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
                  var errorMsg = validatorFunc();
                  if ( errorMsg ){
                    return errorMsg;
                  }
              }
          };

        /***********************客户调用代码**************************/

          var registerForm = document.getElementById( 'registerForm' );

          var validataFunc = function(){
              var validator = new Validator();

              validator.add( registerForm.userName, [{
                  strategy: 'isNonEmpty',
                  errorMsg: '用户名不能为空'
              }, {
                  strategy: 'minLength:10',
                  errorMsg: '用户名长度不能小于10位'
              }]);

              validator.add( registerForm.password, [{
                  strategy: 'minLength:6',
                  errorMsg: '密码长度不能小于6位'
              }]);

              validator.add( registerForm.phoneNumber, [{
                  strategy: 'isMobile',
                  errorMsg: '手机号码格式不正确'
              }]);

              var errorMsg = validator.start();
              return errorMsg;
          }

          registerForm.onsubmit = function(){
              var errorMsg = validataFunc();

              if ( errorMsg ){
                  alert ( errorMsg );
                  return false;
              }
        };
    </script>
  </body>
</html>
